import React, { PureComponent } from 'react';
import { Card, Button, message, Form, Input, Radio, Upload } from 'antd';
import { addPlan } from '@/services/notice'
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
import { baseurl } from '@/services/baseurl';
import { PageContainer } from '@ant-design/pro-layout'
import { history } from 'umi'
class Index extends PureComponent<any, any> {
    constructor(props: any) {
        super(props)
        this.state = {
            editorState: BraftEditor.createEditorState('<p>请输入内容</p>'), // 设置编辑器初始内容
            outputHTML: '<p></p>',// 编辑器输出内容
            title: '',
            stick: 0,
            cover: []
        }
    }
    submit = () => {
        const { outputHTML, title, stick, cover } = this.state;
        addPlan({ content: outputHTML, title, stick, cover: (cover[0] && cover[0].originFileObj) ? cover[0].originFileObj : '' }).then(res => {
            if (res.static === 1) {
                message.success('添加成功')
                history.goBack()
            } else {
                message.error('添加失败')
            }
        })
    }
    handleEditorChange = (editorState: any) => {
        this.setState({ editorState, outputHTML: editorState.toHTML() })
    }
    changeTitle = (e: any) => {
        this.setState({
            title: e.target.value
        })
    }
    changeStick = (e: any) => {
        this.setState({
            stick: e.target.value
        })
    }
    changeFile = (info: any, name: string) => {
        let fileList = [...info.fileList];
        fileList = fileList.slice(-1);
        fileList = fileList.map(file => {
            if (file.response) {
                file.url = file.response.url;
            }
            return file;
        });
        this.setState({ [name]: fileList });
    };
    render() {
        const { editorState, stick, cover } = this.state;
        const myUploadFn = (param: any) => {
            const serverURL = baseurl + 'index/index/img'
            const xhr = new XMLHttpRequest
            const fd = new FormData()
            const successFn = (response: any) => {
                // 假设服务端直接返回文件上传后的地址
                // 上传成功后调用param.success并传入上传后的文件地址
                param.success({
                    url: baseurl + xhr.responseText.replace('.', '').replace(/"/g, ''),
                })
            }
            const progressFn = (event: any) => {
                // 上传进度发生变化时调用param.progress
                param.progress(event.loaded / event.total * 100)
            }
            const errorFn = (response: any) => {
                // 上传发生错误时调用param.error
                param.error({
                    msg: 'unable to upload.'
                })
            }
            xhr.upload.addEventListener("progress", progressFn, false)
            xhr.addEventListener("load", successFn, false)
            xhr.addEventListener("error", errorFn, false)
            xhr.addEventListener("abort", errorFn, false)
            fd.append('file', param.file)
            xhr.open('POST', serverURL, true)
            xhr.send(fd)
        }
        return (
            <PageContainer title="添加计划">
                <Card>
                    <Form>
                        <Form.Item label="标题">
                            <Input placeholder="请输入标题" onChange={this.changeTitle} />
                        </Form.Item>
                        <Form.Item label="内容">
                            <BraftEditor
                                style={{ border: '1px solid #ddd' }}
                                value={editorState}
                                media={{ uploadFn: myUploadFn }}
                                onChange={this.handleEditorChange}
                            />
                        </Form.Item>
                        <Form.Item label="上传封面"  >
                            <Upload listType='picture' beforeUpload={() => { return false }} accept=".jpg,.png,.ppt" onChange={(e) => this.changeFile(e, 'cover')} fileList={cover}>
                                <Button>上传封面</Button>
                            </Upload>
                        </Form.Item>
                        <Form.Item label="置顶">
                            <Radio.Group value={stick} onChange={this.changeStick}>
                                <Radio value={0}>不置顶</Radio>
                                <Radio value={1}>置顶</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </Form>
                    <Button style={{ marginLeft: 40 }} onClick={this.submit} type="primary">提交</Button>
                </Card>
            </PageContainer>
        );
    }
}

export default Index;
